<template>
  <div class="blogItem" v-for="item in data" :key="item.id" @click="goDetail(item.id)">
    <div class="titleBox">
      <img
        src="https://fuyouplus.oss-cn-beijing.aliyuncs.com/image/loading.gif"
        alt="loading"
        v-show="!isLoaded"
      />
      <div class="headerImgWrap">
        <img :src="item.img" alt="" className="headerImg" @load="imgLoad" v-show="isLoaded" />
      </div>
      <div class="mc">
        {{ item.title }}
      </div>
    </div>
    <div class="content" v-html="renderContent(item.content)"></div>
    <div class="blogInfo">
      <div class="item">
        <ICalendar size="22" color="var(--iconColor)" />
        {{ format(item.createTime, "zh_CN").replace(" ", "") }}
        <!-- {{ betweenDateToToday(item.createTime) }}天前 -->
      </div>
      <div class="item">
        <IClassify size="22" color="var(--iconColor)" />
        {{ item.category }}
      </div>
      <div class="item" v-if="item.tag">
        <ITag size="22" color="var(--iconColor)" />
        <span>{{ item.tag }}</span>
      </div>
    </div>
  </div>
  <div class="emptyBox" v-if="data.length % 2 !== 0 && isPC"></div>
</template>

<script setup lang="ts">
import { ref, defineProps, computed } from "vue"
import { ICalendar, IClassify, ITag } from "@cop/Icons"
import { format } from "timeago.js"
import { useRouter } from "vue-router"
import { isPC, isMobile } from "@/hooks/resize"
import { betweenDateToToday } from "@/util/util"
import type { article } from "@/hooks/useArticles"

const router = useRouter()
defineProps<{
  data: Array<article>
}>()

const isLoaded = ref<boolean>(false)
const imgLoad = () => {
  setTimeout(() => {
    isLoaded.value = true
  }, 500)
}
const goDetail = (id: number) => {
  router.push(`/blogDetail/${id}`)
}
const renderContent = computed(() => {
  return content => {
    let reg = /<my-p>(\s|\S)+?<\/my-p>/i
    let RegExecResult = reg.exec(content)
    let Content2 = RegExecResult ? RegExecResult[0] : ""
    Content2 = Content2.replaceAll("<my-p>", "")
    Content2 = Content2.replaceAll("<\/my-p>", "")
    return Content2
  }
})
</script>

<style lang="scss" scoped>
@media (max-width: 768px) {
  .blogItem {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.emptyBox {
  width: 450px;
  height: 350px;
  display: inline-block;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 40px;
}

.blogItem {
  cursor: var(--cursor-B);
  display: inline-block;
  width: 450px;
  height: 350px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 40px;
  box-shadow: 0 8px 16px rgb(0 0 0 / 12%);
  transition: all 0.3s ease 0s, transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s,
    -webkit-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
  border-radius: var(--blogItemRadius);

  &:hover {
    box-shadow: 0 14px 38px rgb(0 0 0 / 14%), 0 3px 8px rgb(0 0 0 / 12%);
  }

  &:hover .headerImg {
    // transform: scale(1.04);
    transform: scale(1.2) rotate(5deg);
  }

  .titleBox {
    width: 100%;
    height: 60%;
    position: relative;
    overflow: hidden;
    border-top-left-radius: var(--blogItemRadius);
    border-top-right-radius: var(--blogItemRadius);

    .headerImgWrap {
      width: 100%;
      height: 100%;
      border-top-left-radius: var(--blogItemRadius);
      border-top-right-radius: var(--blogItemRadius);
      overflow: hidden;

      .headerImg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-top-left-radius: var(--blogItemRadius);
        border-top-right-radius: var(--blogItemRadius);
        transition: transform 0.7s ease-out;
      }
    }

    .mc {
      width: 100%;
      height: 50px;
      line-height: 50px;
      position: absolute;
      left: 0;
      bottom: 0;
      box-sizing: border-box;
      padding-left: 10px;
      backdrop-filter: blur(5px) saturate(150%) brightness(1.1);
      color: var(--TextColor);
      background: var(--blogItemTitleBg);
      transition: all 0.3s var(--n-bezier);
      font-size: 18px;
      text-align: left;
    }
  }

  .content {
    width: 100%;
    height: 30%;
    box-sizing: border-box;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    text-indent: 1em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    background: var(--blogItemContentBg);
    color: var(--TextColor);
    transition: all 0.3s var(--n-bezier);
    font-size: 16px;
    text-align: left;
  }

  .blogInfo {
    width: 100%;
    height: 10%;
    background: var(--blogItemContentBg);
    transition: background 0.3s var(--n-bezier);
    box-sizing: border-box;
    padding-top: 5px;
    border-bottom-left-radius: var(--blogItemRadius);
    border-bottom-right-radius: var(--blogItemRadius);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    text-align: left;

    .item {
      margin-right: 13px;
      display: inline-flex;
      align-items: center;
      color: var(--TextColor);
      transition: all 0.3s var(--n-bezier);
      font-size: 14px;

      &:first-child {
        margin-left: 10px;
      }

      i {
        margin-right: 3px;
        transition: all 0.3s var(--n-bezier);
      }
    }
  }
}
</style>
